<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8" />
    <title>Dialog - ESUI Demo</title>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="assets/google-code-prettify/prettify.css" />
    <link rel="stylesheet" href="assets/themes/standard.css" />
    <!--[if lt IE 9]>
    <link rel="stylesheet" href="assets/ie8.css" />
    <![endif]-->
</head>
<body>
    <div class="header">
        <h1 id="branding">ESUI - Dialog</h1>
    </div>
    <div class="ui-g main-container">
        <div id="side-bar" class="ui-u-1-5">
            <ul id="navigator" class="ui-nav">
            </ul>
        </div>
        <div id="main" class="ui-u-4-5">
            <h2>静态HTML</h2>
            <div class="example">
                <div data-ui="type:Dialog;width:400;draggable:true;mask:true;id:staticDg;closeOnHide:false;">
                    <div data-role="title">弹窗</div>
                    <div data-role="content">
                        <p>我来自静态HTML</p>
                    </div>
                </div>
                <button type="button" id="trigger-static" class="ui-button ui-button-primary">Dialog示例</button>
            </div>
            <script type="text/sample">
                var staticDg = ui.get('staticDg');
                document.getElementById('trigger-static').onclick = function () {
                    if (staticDg) {
                        staticDg.show();
                    }
                };
            </script>
            <h2>JS动态创建</h2>
            <div class="example">
                <button type="button" id="trigger-common" class="ui-button ui-button-primary">Dialog示例</button>
            </div>
            <script type="text/sample">
                var main = document.createElement('div');
                document.body.appendChild(main);
                dialog = ui.create('Dialog', {
                    title: 'Dialog示例',
                    content: '我是JS动态创建的',
                    width: 400,
                    draggable: true,
                    closeOnHide: false,
                    id: 'test',
                    childName: 'test',
                    main: main,
                    variants: 'shadow'
                });
                dialog.render();
                var btnOk = dialog.getFoot().getChild('btnOk');
                var btnCancel = dialog.getFoot().getChild('btnCancel');
                btnOk.on('click', function () {
                    Toast.alert('随便创建！').show();
                    dialog.dispose();
                });
                btnCancel.on('click', function () {
                    Toast.alert('不！！！！').show();
                    dialog.dispose();
                });
                dialog.show();
            </script>

            <h2>警告框</h2>
            <div class="intro">
                <p>使用方法<code>Dialog.alert</code>创建警告框。</p>
            </div>
            <div class="example">
                <div class="row">
                    <button type="button" id="trigger-alert" class="ui-button ui-button-danger">Alert</button>
                </div>
            </div>
            <script type="text/sample">
            var dialog = Dialog.alert({
                title: '警告框',
                content: '警告你，请不要随便点我！',
                autoPosition: true,
                width: 400,
                onok: function () {
                    Toast.alert('你死定了').show();
                }
            });

            dialog.on('ok', function () {
                Toast.alert('我不理你了').show();
            });
            </script>

            <h2>警告框 - HTML Title &amp; Content</h2>
            <p>使用方法<code>Dialog.alert</code>创建警告框。</p>
            <div class="example">
                <div class="row">
                    <button type="button" id="trigger-alert2" class="ui-button ui-button-danger">Alert 2</button>
                </div>
            </div>
            <script type="text/sample">
            document.getElementById('trigger-alert2').onclick = function () {
                var dialog = Dialog.alert({
                    rawTitle: '<span class="ui-icon-exclamation-triangle ui-text-warning"></span> 警告框',
                    rawContent: '<div class="ui-text-warning">警告你，请不要随便点我！</div>',
                    autoPosition: true,
                    width: 400,
                    onok: function () {
                        Toast.alert('你死定了').show();
                    }
                });

                dialog.on('ok', function () {
                    Toast.alert('我不理你了').show();
                });
            };
            </script>

            <h2>确认框</h2>
            <p>使用方法<code>Dialog.confirm</code>创建确认框。</p>
            <div class="example">
                <div class="row">
                    <button type="button" id="trigger-confirm" class="ui-button ui-button-info">Comfirm</button>
                </div>
            </div>
            <script type="text/sample">
                var dialog = Dialog.confirm({
                    title: '确认框',
                    content: '你确定要点我吗？',
                    onok: function () {
                        Toast.alert('你死定了！').show();
                    },
                    width: 400
                });
                dialog.on('ok', function () {
                    Toast.alert('你死定了！').show();
                });
                dialog.on('cancel', function () {
                    Toast.alert('算你识相！').show();
                });
            </script>

            <h2>确认框  HTML Title &amp; Content</h2>
            <p>使用方法<code>Dialog.confirm</code>创建确认框。</p>
            <div class="example">
                <div class="row">
                    <button type="button" id="trigger-confirm2" class="ui-button ui-button-info">Comfirm 2</button>
                </div>
            </div>
            <script type="text/sample">
            document.getElementById('trigger-confirm2').onclick = function () {
                var dialog = Dialog.confirm({
                    rawTitle: '<span class="ui-icon-exclamation-triangle ui-text-warning"></span> 确认框',
                    rawContent: '<div class="ui-text-warning">你确定要点我吗？</div>',
                    onok: function () {
                        Toast.alert('你死定了！').show();
                    },
                    width: 400
                });
                dialog.on('ok', function () {
                    Toast.alert('你死定了！').show();
                });
                dialog.on('cancel', function () {
                    Toast.alert('算你识相！').show();
                });
            };
            </script>

            <h2>优先级</h2>
            <div class="intro">
                <p>Alert和Confirm弹出框的层级优先级最高，会一直保持在最上。</p>
            </div>
            <div class="example">
                <button type="button" id="trigger-z-index-test" class="ui-button ui-button-primary">优先级测试</button>
            </div>
            <script type="text/sample">
                var main = document.createElement('div');
                document.body.appendChild(main);

                var dialog = ui.create('Dialog', {
                    title: '我在后面',
                    content: '我应该在后面我应该在后面我应该在后面我应该在后面我应该在后面',
                    width: 400,
                    main: main,
                    left: 100
                });
                dialog.show();
                var btnOk = dialog.getFoot().getChild('btnOk');
                var btnCancel = dialog.getFoot().getChild('btnCancel');
                btnOk.on('click', function () {
                    Toast.alert('我在后面！').show();
                    dialog.dispose();
                });
                btnCancel.on('click', function () {
                    Toast.alert('不！！！！').show();
                    dialog.dispose();
                });
                document.getElementById('trigger-alert').click();
            </script>

            <h2>显示和隐藏</h2>
            <div class="intro">
                <p>方法<code>show()</code>和<code>hide()</code>可以控制对话框的显示和隐藏。</p>
            </div>
            <div class="example">
                <div data-ui="type:Dialog;width:400;draggable:true;mask:true;id:showDlg;closeOnHide:false;">
                    <div data-role="title">Dialog</div>
                    <div data-role="content">
                        <p>点击确定，对话框会隐藏。</p>
                    </div>
                </div>
                <button type="button" id="trigger" class="ui-button ui-button-primary">Dialog示例</button>
            </div>
            <script type="text/sample">
                document.getElementById('trigger').onclick = function () {
                    var dialog = ui.get('showDlg');
                    dialog.show();
                    dialog.getFoot().getChild('btnOk').on('click', function() {
                        dialog.hide();
                    })
                }
            </script>
        </div>
    </div>
    <script src="assets/loader/esl.js"></script>
    <script src="config.js"></script>
    <script src="demo.js"></script>
    <script src="assets/google-code-prettify/prettify.js"></script>
    <script id="main-js">
    require(
        [
            'esui',
            'esui/Button',
            'esui/Dialog',
            'esui/Toast',
            'esui/Tab',
            'demo'
        ],
        function (ui, Button, Dialog, Toast) {
            var controls = ui.init();
            
            var staticDg = ui.get('staticDg');

            document.getElementById('trigger').onclick = function () {
                var dialog = ui.get('showDlg');
                dialog.show();
                dialog.getFoot().getChild('btnOk').on('click', function() {
                    dialog.hide();
                })
            };

            document.getElementById('trigger-alert').onclick = function () {
                var dialog = Dialog.alert({
                    title: '警告框',
                    content: '警告你，请不要随便点我！',
                    autoPosition: true,
                    width: 400,
                    onok: function () {
                        Toast.alert('你死定了').show();
                    }
                });

                dialog.on('ok', function () {
                    Toast.alert('我不理你了').show();
                });
            };

            document.getElementById('trigger-alert2').onclick = function () {
                var dialog = Dialog.alert({
                    rawTitle: '<span class="ui-icon-exclamation-triangle ui-text-warning"></span> 警告框',
                    rawContent: '<div class="ui-text-warning">警告你，请不要随便点我！</div>',
                    autoPosition: true,
                    width: 400,
                    onok: function () {
                        Toast.alert('你死定了').show();
                    }
                });

                dialog.on('ok', function () {
                    Toast.alert('我不理你了').show();
                });
            };

            document.getElementById('trigger-confirm').onclick = function () {
                var dialog = Dialog.confirm({
                    title: '确认框',
                    content: '你确定要点我吗？',
                    onok: function () {
                        Toast.alert('你死定了！').show();
                    },
                    width: 400
                });
                dialog.on('ok', function () {
                    Toast.alert('你死定了！').show();
                });
                dialog.on('cancel', function () {
                    Toast.alert('算你识相！').show();
                });
            };

            document.getElementById('trigger-confirm2').onclick = function () {
                var dialog = Dialog.confirm({
                    rawTitle: '<span class="ui-icon-exclamation-triangle ui-text-warning"></span> 确认框',
                    rawContent: '<div class="ui-text-warning">你确定要点我吗？</div>',
                    onok: function () {
                        Toast.alert('你死定了！').show();
                    },
                    width: 400
                });
                dialog.on('ok', function () {
                    Toast.alert('你死定了！').show();
                });
                dialog.on('cancel', function () {
                    Toast.alert('算你识相！').show();
                });
            };

            document.getElementById('trigger-static').onclick = function () {
                if (staticDg) {
                    staticDg.show();
                }
            };

            document.getElementById('trigger-common').onclick = function () {
                var dialog = ui.get('test');
                if (!dialog) {
                    // 创建main
                    var main = document.createElement('div');
                    document.body.appendChild(main);
                    dialog = ui.create('Dialog', {
                        title: 'Dialog示例',
                        content: '我是JS动态创建的',
                        width: 400,
                        draggable: true,
                        closeOnHide: false,
                        id: 'test',
                        childName: 'test',
                        main: main,
                        variants: 'shadow'
                    });
                    dialog.render();
                    var btnOk = dialog.getFoot().getChild('btnOk');
                    var btnCancel = dialog.getFoot().getChild('btnCancel');
                    btnOk.on('click', function () {
                        Toast.alert('随便创建！').show();
                        dialog.dispose();
                    });
                    btnCancel.on('click', function () {
                        Toast.alert('不！！！！').show();
                        dialog.dispose();
                    });
                }
                dialog.show();
            };

            document.getElementById('trigger-z-index-test').onclick = function () {
                // 创建main
                var main = document.createElement('div');
                document.body.appendChild(main);

                var dialog = ui.create('Dialog', {
                    title: '我应该在后面',
                    content: '我应该在后面我应该在后面我应该在后面我应该在后面我应该在后面',
                    width: 400,
                    main: main,
                    left: 100
                });
                dialog.show();
                var btnOk = dialog.getFoot().getChild('btnOk');
                var btnCancel = dialog.getFoot().getChild('btnCancel');
                btnOk.on('click', function () {
                    Toast.alert('我在后面！').show();
                    dialog.dispose();
                });
                btnCancel.on('click', function () {
                    Toast.alert('不！！！！').show();
                    dialog.dispose();
                });
                document.getElementById('trigger-alert').click();
            };
        }
    );
    </script>
    <script src="sitemap.js"></script>
</body>
</html>
